<template>
  <div class="home">
    <div class="top_banner_view">

    </div>
    <div class="top_item_view">
      <div class="top_item_content_view">
        <ButtonItemView class="top_item_first_style" :title="top_item_first.title" :icon="top_item_first.icon" :index="top_item_first.index" v-on:itemClick="itemClick"/>
        <ButtonItemView :title="top_item_second.title" :icon="top_item_second.icon" :index="top_item_second.index" v-on:itemClick="itemClick"/>
        <ButtonItemView class="top_item_third_style" :title="top_item_third.title" :icon="top_item_third.icon" :index="top_item_third.index" v-on:itemClick="itemClick"/>
      </div>
    </div>

    <div class="center_item_view">
      <div class="center_item_content_view">
        <ButtonItemView class="center_item_content_item_view"  v-for="center_item in center_item_list" :key="center_item.index" :title="center_item.title" :icon="center_item.icon" :index="center_item.index" v-on:itemClick="itemClick"/>
      </div>
      <div class="center_item_content_bottom_view">

      </div>
    </div>

    <div class="empty_section_view">

    </div>
    
  </div>
</template>

<script>
// @ is an alias to /src

import ButtonItemView from '@/components/ButtonItemView.vue'

export default {
  name: 'Home',
  components: {
    ButtonItemView
  },
  data () {
    return {
      top_item_first:{'title':'单笔转账','icon':'https://img0.baidu.com/it/u=2359361020,2055583759&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',"index":0},
      top_item_second:{'title':'扫码转账','icon':'https://img0.baidu.com/it/u=2359361020,2055583759&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',"index":1},
      top_item_third:{'title':'批量转账','icon':'https://img0.baidu.com/it/u=2359361020,2055583759&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',"index":2},
      center_item_list:[
        {'title':'单笔转账','icon':'https://img0.baidu.com/it/u=2359361020,2055583759&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',"index":0},
        {'title':'扫码转账','icon':'https://img0.baidu.com/it/u=2359361020,2055583759&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',"index":1},
        {'title':'批量转账','icon':'https://img0.baidu.com/it/u=2359361020,2055583759&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',"index":2},
        {'title':'批量转账','icon':'https://img0.baidu.com/it/u=2359361020,2055583759&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',"index":3},
        {'title':'批量转账','icon':'https://img0.baidu.com/it/u=2359361020,2055583759&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',"index":4},
        {'title':'批量转账','icon':'https://img0.baidu.com/it/u=2359361020,2055583759&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',"index":5},
        {'title':'批量转账','icon':'https://img0.baidu.com/it/u=2359361020,2055583759&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',"index":6},
        {'title':'批量转账','icon':'https://img0.baidu.com/it/u=2359361020,2055583759&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',"index":7}
      ]
    }
  },
  methods:{
    itemClick(index){
      console.log('heheda' + "------" + index);
    }
  }
}
</script>


<style>
  .top_banner_view{
    background-color: red;
    height: 52px;
  }

  .top_item_view{
    margin: 7px 7px 0 7px;
    background-color: orange;
  }

  .top_item_content_view{
    display: flex; 
    flex-direction: row;
    justify-content: space-between;
    padding-top: 33.5px;
    padding-bottom: 45.5px;
  }

  .top_item_first_style{
    margin-left: 37px;
  }

  .top_item_third_style{
     margin-right: 37px;
  }

  .center_item_view{
    margin: -13px 15px 0 15px;
  }

  .center_item_content_view{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
  }

  .center_item_content_item_view{
    margin-top: 24px;
    flex: 0 0 25%;
    
  }

  .center_item_content_item_view .itemTitle{
    color: black;
  }

  .center_item_content_bottom_view{
    margin-top: 5px;
    background-color: red;
    height: 20px;
  }

  .empty_section_view{
    background-color: #F6F9FD;
    height: 5px;
  }
</style>

